<template>
    <div v-if="showFlag" >
        <el-table
                :data="orderList"
                style="width: 100%"
                empty-text="没有未支付的订单哦"
                v-loading="isLoading">
            <el-table-column
                    prop="orderId"
                    label="订单编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="payment"
                    label="订单总额"
                    width="150">
            </el-table-column>
            <el-table-column
                    label="邮费"
                    width="180">
                <template slot-scope="scope">
                    <span v-if="scope.row.postFee == null">商家未发货</span>
                    <span v-else>{{scope.row.postFee}}$</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="商家留言"
                    width="220">
                <template slot-scope="scope">
                    <span v-if="scope.row.buyerMessage == null">商家未发货</span>
                    <span v-else>{{scope.row.buyerMessage}}$</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="success"
                            @click="configReceipt(scope.$index, scope.row)">确认收货
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="cancelOrder(scope.$index, scope.row)">取消订单
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "MyOrderAccount",
        data() {
            return {
                orderList: [],
                showFlag: false,//加载页面
                isLoading: true//
            }
        },
        methods: {
            getUSerOrderAccount() {
                this.$axios
                    .get("/item/getaccountpaid", {
                        params: {
                            "userId": this.$store.getters.getUser.id
                        }
                    })
                    .then(res => {
                        for (let i = 0; i < res.data.result.length; i++) {
                            const item = res.data.result[i];
                            this.orderList.push(item);
                        }
                        this.showFlag = true;
                        this.isLoading = false;
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    })
            },
            //确认收货
            configReceipt() {

            },
            //取消订单
            cancelOrder(index, row) {
                this.$confirm('此操作将取消该订单, 是否继续?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let params = new URLSearchParams();
                    params.append("orderId", row.orderId);
                    this.$axios
                        .post("/item/cancelorder", params)
                        .then(res => {
                            if (res.data.result != null) {
                                this.notifySucceed("取消订单成功");
                            } else {
                                this.notifyError("取消失败，请联系管理员");
                            }
                        })
                }).catch((err) => {
                });
            },
        },
        created() {
            this.getUSerOrderAccount();
        }
    }
</script>

<style scoped>

</style>
